<template>
    <div>
    <!-- 顶栏 -->
    <div class="headers">
    <div class="header">
        <div class="nav" route>
            <img src="../assets/logo.png" alt="">
          <span @click="skip('index')" :class="[active=='index'?'showActive':'']" >首页</span>
          <span @click="skip('agents')" :class="[active=='agents'?'showActive':'']" >房产经纪</span>
          <span @click="skip('category')" :class="[active=='category'?'showActive':'']">地产分类</span>
          <span @click="skip('page')" :class="[active=='page'?'showActive':'']">关于我们</span>
        </div>
    </div>
    </div>

    <!-- 中间 -->
        <router-view></router-view>
     <!-- 底部 -->
        <div class="footer">
            <div class="footer1">
                <ul>
                    <li class="abc">abc---赛品件在</li>
                    <li>共同打造的上亿旅行者"旅行神器"</li>
                    <li><span>60, 000 </span>个目的地</li>
                    <li><span>600, 000  </span>多个全球旅地新玩法</li>
                    <li><span>760, 000, 000 </span>次攻略下载</li>
                    <li><span>38, 000 </span>家旅游产全球旅游目品供应商</li>
                </ul>
                <ul>
                    <li class="abc">关于我们</li>
                    <li>隐私政策 商标声明</li>
                    <li>服务协议 游记协议</li>
                    <li>商城平台服务协议</li>
                    <li>网络信息侵权通知指引</li>
                    <li>旅游网服务监督员</li>
                    <li>网站地图</li>
                </ul>

                <ul>
                    <li class="abc">旅行服务</li>
                    <li>旅游攻略 酒店预订</li>
                    <li>旅游特价 国际租车</li>
                    <li>旅游问答 旅游保险</li>
                    <li>旅游指南 订火车票</li>
                    <li>旅游咨询 App下载</li>
                </ul>
                <img src="../assets/qrcode.2f4b4323.png" alt="">
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
      return {
        active:'index',
      }
    },
    methods: {
      skip(a){
    this.$router.replace({ path: a })   
        this.active=a
      },

    }
  }
</script>
<style lang="scss" scoped>
.headers{
    height: 60px;
}
.header{
    position: fixed;
    top:0;
    margin-left: 50%;
    width: 100%;
    height: 60px;
    background-color: #fff;
    z-index: 999;
    .nav{
        display: flex;
        width: 750px;
        height: 60px;
        transform: translateX(-50%);
        align-items: center;
        span{
            color: black;
            float: left;
            height: 60px;
            line-height: 60px;
            margin: 0;
            font-size: 13px;
            padding: 0 20px;
            cursor: pointer;
        }
        img{
            width: 40px;
            height: 40px;
            margin-right: 80px;
        }
    }
}
.showActive{
        border-bottom: 2px solid #409eff;
}
.footer{
    position: fixed;
    bottom: 0px;
    display: flex;
    align-items: center;
    width: 100%;
    height: 170px;
    background: #333335; 
    
    .footer1{
        width: 860px;
        height: 143px;
        margin: 0 auto;
        padding: 0 20px;
        display: flex;
        justify-content:space-between;
        align-items: center;   
        ul{
            font-size: 12px;
            color: #d2d2d2;
            li{
                list-style: none;
                span{
                    color:#ffa500
                }
            }
        }
    }
        img{
            width: 100px;
            height: 100px;
        }
.abc{
    font-size: 16px;
}
}
</style>